<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单提交</title>
    <link rel="stylesheet" rel="icon" href="/mi/css/buy/order_sub_success.css" type="text/css" />
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header">
    <div class="header-nav">
        <div class="header-log">
            <a href="/mi/index" target="_blank">
                <img src="/mi/imgs/mi.png" alt="">
            </a>
        </div>
        <div class="header-middler">
            <h2>支付订单</h2>
        </div>

        <div class="header-end">
            <div class="header-e">

            </div>
            <div class="header-last">
                <ul class="last-one">
                    <li class="last-two"><a href="">2589511490</a>
                        <ul class="inner">
                            <li class="one">个人中心</li>
                            <li class="two">评价晒单</li>
                            <li class="three">我的喜欢</li>
                            <li class="four">小米账户</li>
                            <li class="five">退出登入</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="header-last-two">
                <span>&nbsp;|&nbsp;</span>
                <a href="/mi/order/order_load">我的订单</a>
            </div>
        </div>
    </div>
</div>



<!-- 主题部分: 订单成功的信息, 以及选择支付方式 -->
<div class="page-main">
    <div class="container">
        <div class="confirm-context">
            <!-- 订单详情部分 -->
            <div class="confirm-order">
                <div class="section section-order">
                    <i class="iconfont icon-right">√</i>

                    <!-- 订单信息 -->
                    <div class="order-info" style="overflow:hidden">

                        <!-- 左侧信息 -->
                        <div class="fl">
                            <h2 class="title">订单提交成功！去付款咯～</h2>

                            <!-- 15分钟内支付 -->
                            <p class="order-time">
                                    <span>
                                        请在
                                        <span class="pay-time-tip">1分钟</span>
                                        <span>内完成支付</span>
                                        <span> 支付, 超时后将取消订单</span>
                                    </span>
                            </p>


                            <p id="getPackage" class="post-info">
                                收货信息：${orderAndOrderDetailDTO.address.userName} ${orderAndOrderDetailDTO.address.userPhone} ${orderAndOrderDetailDTO.address.userAddress}
                            </p>
                        </div>

                        <!-- 右侧信息 -->
                        <div class="fr" >
                            <div class="total">
                                应付总额：
                                <span class="money">
                                        <span>${orderAndOrderDetailDTO.orders.payAmount}</span>
                                        <span>元</span>
                                    </span>
                            </div>

                            <a style="cursor: pointer" onclick="selectOrder()">
                                订单详情
                                <i class="iconfont">&#xe627;</i>
                            </a>
                        </div>
                    </div>



                    <!-- 这里有个下拉框，订单更详情的信息（有空可以实现—） -->
                    <div id="orderD" class="order-detail J_showOrderDetail" style="height: 236px;">
                        <ul>
                            <li>
                                <div class="label">订单号</div>
                                <div class="content">
                                    <span class="order-num">${orderAndOrderDetailDTO.orders.orderNumber}</span>
                                </div>
                            </li>
                            <li>
                                <div class="label">收货信息</div>
                                <div class="content">
                                    ${orderAndOrderDetailDTO.address.userName} ${orderAndOrderDetailDTO.address.userPhone} ${orderAndOrderDetailDTO.address.userAddress}
                                </div>
                            </li>
                            <li>
                                <div class="label">商品信息</div>
                                <div class="content">
                                    <c:forEach items="${orderAndOrderDetailDTO.orderDetailList}" var="c" varStatus="xh">
                                        <span>${c.productSpecName}  </span>
                                    </c:forEach>
                                </div>
                            </li>
                            <li>
                                <div class="label">发票信息</div>
                                <div class="content">电子普通发票 个人</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>



            <!-- 选择支付方式 -->
            <div class="confirm-pay">
                <div class="section section-payment">
                    <div class="cash-title">
                        <div>选择一下支付方式</div>
                    </div>

                    <div class="payment-box">
                        <div class="payment-header">
                            <h3>支付平台</h3>
                        </div>
                        <div class="payment-body">
                            <ul class="payment-list">
                                <li>
                                    <a href="/mi/pay/topay?subject=rgb&money=${orderAndOrderDetailDTO.orders.payAmount}&orderNumber=${orderAndOrderDetailDTO.orders.orderNumber}"><img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png" alt=""></a>
                                </li>
                                <li>
                                    <img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a4f743d0bdb5c048ad9803914a4ea83.jpg" alt="">
                                </li>
                                <li>
                                    <img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<!-- 底部公共部分 -->
<%@include file="../common/page-bottom.jsp"%>


<script>
    let  getPackage = document.getElementById("getPackage");
    getPackage.style.display = "none";
    function selectOrder() {
        let orderD = document.getElementById("orderD");
        let  getPackage = document.getElementById("getPackage");
        if(orderD.style.height == "240px") {
            orderD.style.height = "0px";
            getPackage.style.display = "block";
        }
        else {
            orderD.style.height = "240px";
            getPackage.style.display = "none";
        }
    }
</script>
</body>
</html>